import { useState } from "react";
import ReactDOM from "react-dom";

interface ModalProps {
    isOpen: boolean, 
    onClose: () => void, 
    children: React.ReactNode
}

function Modal({ isOpen, onClose, children }: ModalProps) {
    // 如果未打开, 则不渲染任何内容
    if (!isOpen) return null;

    // 创建 Portal, 将模态框渲染到 #modal-root 元素
    return ReactDOM.createPortal(
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg shadow-xl p-6 max-w-md w-3xl transform transition-all duration-300 scale-100">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-bold text-gray-800">模态框标题</h2>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600 transition-colors"
                    >
                        <i className="fa fa-times text-xl"></i>
                    </button>
                </div>

                <div className="mb-6 text-gray-600">
                    {children}
                </div>

                <div className="flex justify-end">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-md transition-colors mr-2"
                    >
                        取消
                    </button>
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
                    >
                        确认
                    </button>
                </div>
            </div>
        </div>,
        document.getElementById('modal-root') || document.body
    );
}

const PortalHome = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const openModal = () => {
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
    };

    return (
        <div className="container mx-auto p-2 max-w-md">
            <h1 className="text-2xl font-bold mb-6">React Portal 示例</h1>

            <button
                onClick={openModal}
                className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
            >
                打开模态框
            </button>

            <div className="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <h3 className="font-medium text-gray-800 mb-2">关于 React Portal</h3>
                <p className="text-sm text-gray-600">
                    Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀方法。
                    这个示例展示了如何使用 Portal 创建一个模态框, 尽管模态框的代码在组件树中, 
                    但它会被渲染到应用主体的外部。
                </p>
            </div>

            {/* 模态框组件 */}
            <Modal isOpen={isModalOpen} onClose={closeModal}>
                <p>这是一个使用 React Portal 创建的模态框。无论父组件在 DOM 树中的位置如何, 
                    Portal 都能让我们将内容渲染到指定的 DOM 节点。</p>
            </Modal>
        </div>
    );
};

export default PortalHome;